import React from 'react'
import { hashHistory } from 'react-router'
import CommonHeader from 'COMPONENT/CommonHeader';
import { List, Icon, Button, InputItem ,ImagePicker ,Checkbox, Picker } from 'antd-mobile'
import './index.less';
import PropTypes from 'prop-types';
const AgreeItem = Checkbox.AgreeItem;
const ListItem = List.Item;
const byStagesData = [
    {value:'1年',label:'1年'},
    {value:'2年',label:'2年'},
    {value:'3年',label:'3年'},
    {value:'4年',label:'4年'},
    {value:'5年',label:'5年'},
    {value:'6年',label:'6年'},
    {value:'7年',label:'7年'},
    {value:'8年',label:'8年'},
    {value:'9年',label:'9年'},
    {value:'10年',label:'10年'},
    {value:'11年',label:'11年'},
    {value:'12年',label:'12年'},
    {value:'13年',label:'13年'},
    {value:'14年',label:'14年'},
    {value:'15年',label:'15年'},
    {value:'16年',label:'16年'},
    {value:'17年',label:'17年'},
    {value:'18年',label:'18年'},
    {value:'19年',label:'19年'},
    {value:'20年',label:'20年'},
    {value:'21年',label:'21年'},
    {value:'22年',label:'22年'},
    {value:'23年',label:'23年'},
    {value:'24年',label:'24年'},
    {value:'25年',label:'25年'},
    {value:'26年',label:'26年'},
    {value:'27年',label:'27年'},
    {value:'28年',label:'28年'},
    {value:'29年',label:'29年'},
    {value:'30年',label:'30年'},
];
const subbranch = [
    {value:'浦东新区支行',label:'浦东新区支行'},
    {value:'普陀区支行',label:'普陀区支行'},
];
const accountManager = [
    {value:'李坤',label:'李坤'},
    {value:'张飞',label:'张飞'},
];

const items = [ 
    
]


class Home extends React.Component {
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props){ 
        super(props);
        this.state={ 
            loanMoney:'123,999.00',
            loanLimit:byStagesData[0].value,
            buyerPhone:'13245676543',
            sellerPhone:'',
            houseNum:'',
            btnChecked:'0',
            btnChecked2:'0',
            accountManager:'',
            subbranch:'',
            files1:[],
            files2:[],
            dataList:[
                {key:1}
            ]
        }
    }
    
    onChange = (files1, type, index) => {
        console.log(files1, type, index);
        this.setState({
            files1,
        });
    }

    onChange2 = (files2, type, index) => {
        console.log(files2, type, index);
        this.setState({
            files2,
        });
    }

    radioToggleAction = () => {
        let checked = this.state.btnChecked;
        if(checked =='1'){ 
            this.setState({
                btnChecked:'0',
            })
        }else{ 
            this.setState({
                btnChecked:'1',
            })
        }
	}

    radioToggleAction2 = () => {
        let checked = this.state.btnChecked2;
        if(checked =='1'){ 
            this.setState({
                btnChecked2:'0',
            })
        }else{ 
            this.setState({
                btnChecked2:'1',
            })
        }
	}

    //跳转确认提取页面
    btnClick=()=>{ 
    
        this.context.router.push({
			pathname: '/Mine/HouseLoanApplyRes'
        })
    }
    //返回
    btnBack=()=>{ 
    
        this.context.router.push({
			pathname: '/Mine'
        })
    }
    addInput=()=>{ 
        let list = Object.assign(this.state.dataList);
        console.log(list.length)
        if(list.length>0 && list.length<10){ 
          let key = list[list.length-1].key+1;
          list.push({key:key})
          this.setState({ 
              dataList:list,
          })
        }
    }

    delCode=(key)=>{ 
        let list = Object.assign(this.state.dataList);
        if(list.length>1){ 
            let newList = list.filter((item,index)=>{ 
                return item.key!=key;
            })
            this.setState({ 
                dataList:newList,
            })
        } 
    }


    render() {
        let {dataList} = this.state;
        let iconChecked = this.state.btnChecked=='1'?'icon_radio_checked':'icon_circle';
        let iconChecked2 = this.state.btnChecked2=='1'?'icon_radio_checked':'icon_circle';
        return (
            <div className="hou_loan_apply">
                <CommonHeader 
					name='房贷申请'					
					leftContentTitle="@back" 
					leftContent='返回'

				/>
				<div style={{height:'.9rem'}}></div>
                
                <div className="form_body">
                    <List>
                        <InputItem defaultValue={this.state.loanMoney}>贷款金额</InputItem>
                        <Picker 
                            data={byStagesData}
                            extra = {this.state.loanLimit}
                            cols="1"  
                            onOk = {val=>this.setState({loanLimit:val})}
                        >
                        <ListItem arrow="horizontal" >贷款期限</ListItem> 
                        </Picker>
                        <InputItem defaultValue={this.state.buyerPhone} editable={false}>买方联系电话</InputItem>
                        <InputItem defaultValue={this.state.sellerPhone} placeholder="请输入卖方联系电话">卖方联系电话</InputItem>                
                        <InputItem defaultValue={this.state.houseNum} placeholder="请输入住房套数">借款人家庭住房套数</InputItem>
                        <InputItem  placeholder="请输入授权编码">配偶授权编码</InputItem>
                        { 
                            dataList.map((item,index)=>{ 
                                return (
                                    <div className="code_body" key={item.key}>
                                        <InputItem className="code_input" placeholder="请输入授权编码">家庭成员授权编码</InputItem>
                                        <div className="code_del" onClick={()=>this.delCode(item.key)}>删除</div>
                                    </div>
                                )
                            })
                        }
                        
                        
                        <ListItem>
                        <div  style={{ width: '100%', color: '#108ee9',fontSize:'0.3rem', textAlign: 'center' }} onClick={this.addInput}>
                            +添加家庭成员授权码
                        </div>
                        </ListItem>
                        <Picker 
                            data={subbranch}
                            extra = {this.state.subbranch}
                            cols="1"  
                            onOk = {val=>this.setState({subbranch:val})}
                        >
                        <ListItem arrow="horizontal" >办理支行</ListItem> 
                        </Picker>
                        {this.state.subbranch?
                        <Picker 
                            data={accountManager}
                            extra = {this.state.accountManager}
                            cols="1"  
                            onOk = {val=>this.setState({accountManager:val})}
                        >
                        <ListItem arrow="horizontal" >客户经理</ListItem> 
                        </Picker>
                        :null}
                    </List>
                    <div className="form_file">
                        <div className="form_file_title">买方身份证</div>
                        <div className="form_file_body">
                            <ImagePicker
                                files={this.state.files1}
                                onChange={this.onChange}
                                onImageClick={(index, fs) => console.log(index, fs)}
                            />
                        </div>
                    </div>
                    <div className="form_file">
                        <div className="form_file_title">卖方身份证</div>
                        <div className="form_file_body">
                            <ImagePicker
                                files={this.state.files2}
                                onChange={this.onChange2}
                                onImageClick={(index, fs) => console.log(index, fs)}
                            />
                        </div>
                    </div>
                </div>

                <section className="agree_section" onClick={this.radioToggleAction.bind(this)}>
                    <div style={{
                        width:'.4rem',
                        height:'.4rem',
                        marginTop: '.1rem',
                        marginRight:'.1rem',
                        background:'url(./imgs/'+iconChecked+'.png) no-repeat center/100%'
                    }}> 
                    
                    </div>
                    <div className="agreeText">
                        我已阅读并同意《个人征信查询和使用授权委托书》
                    </div>
				</section>

                <section className="agree_section" style={{paddingTop:'0'}} onClick={this.radioToggleAction2.bind(this)}>
                    <div style={{
                        width:'.4rem',
                        height:'.4rem',
                        marginTop: '.1rem',
                        marginRight:'.1rem',
                        background:'url(./imgs/'+iconChecked2+'.png) no-repeat center/100%'
                    }}> 
                    
                    </div>
                    <div className="agreeText">
                        我已阅读并同意《个人房屋查询和使用授权委托书》
                    </div>
				</section>

                <div className="btnGroup-two">
                    <Button type="primary" inline disabled={this.state.btnChecked=='1'&&this.state.btnChecked2=='1'?false:true} className="btnGroup-two-btn" onClick={this.btnClick}>提交</Button>
                    <Button type="primary" inline className="btnGroup-two-btn" onClick={this.btnBack}>退出</Button>
                </div>
                

            </div>
        );
    }
}
export default Home;